<template>
  <view style="padding:30rpx;">
    <template v-if="data.status === '0'">
      <view class="flex justify-between">
        <view class="colorB">当前状态为未开票</view>
        <uni-tag text="完成开票" type="primary" @click="dialogVisible"></uni-tag>
      </view>
    </template>
    <template v-if="data.status === '1'">
      <view class="colorB">当前状态为已开票，{{data.updateTime}}完成开票</view>
    </template>
    <uni-title title="开票明细" type="h1"></uni-title>
    <view class="colorB">
      <view class="mainColor border-10" style="border: 1px solid #fff">
        <view class="padding-10">抬头类型：{{invoiceTitle.titleType || '一'}}</view>
        <view class="padding-10">名称：{{invoiceTitle.titleName || '一'}}</view>
        <view class="padding-10">税号：{{invoiceTitle.taxId || '一'}}</view>
        <view class="padding-10">地址：{{invoiceTitle.unitAddress || '一'}}</view>
        <view class="padding-10">电话号码：{{invoiceTitle.phoneNumber || '一'}}</view>
        <view class="padding-10">邮箱：{{invoiceTitle.email || '一'}}</view>
      </view>
    </view>
    <uni-title title="关联申请订单明细" type="h1"></uni-title>
    <view class="colorB" v-for="(item,index) in orderList" :key="index">
      <view class="mainColor border-10" style="border: 1px solid #fff;;margin-bottom: 20rpx;">
        <view class="padding-10">订单号：{{item.orderCode}}</view>
        <view class="padding-10">电费总金额：{{item.totalElectricityAmount}}</view>
        <view class="padding-10">服务费总金额：{{item.totalServiceAmount}}</view>
        <view class="padding-10">订单总金额：{{item.totalOrderAmount}}</view>
      </view>
    </view>
    <uni-title title="合计" type="h1"></uni-title>
    <view class="mainColor border-10 colorB" style="border: 1px solid #fff;">
      <view class="padding-10">总电费金额：{{totalElectricityAmount}}</view>
      <view class="padding-10">总服务费金额：{{totalServiceAmount}}</view>
      <view class="padding-10">总订单金额：{{totalOrderAmount}}</view>
    </view>
    <uni-popup ref="invoiceDialog" type="dialog">
      <uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="通知" content="点击确定，将此记录更改为已开票状态！"
        @confirm="updateInvoiceStatus" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<script>
  import {
    getInvoice,
    updateInvoice
  } from "@/api/order/invoice";
  export default {
    data() {
      return {
        invoiceRecordId: null,
        // 接口返回结果
        data: null,
        // 订单金额列表
        orderList: [],
        // 发票抬头
        invoiceTitle: null,
        totalOrderAmount: null,
        totalServiceAmount: null,
        totalElectricityAmount: null,
      }
    },
    onLoad(option) {
      console.log(option.id, '接收id');
      this.invoiceRecordId = option.id
      this.selectInvoiceRecord()
    },
    methods: {
      selectInvoiceRecord() {
        console.log('发票详情页');
        getInvoice(this.invoiceRecordId).then((response) => {
          this.data = response.data;
          this.orderList = this.data.orderList;
          console.log(response, 'response');
          this.invoiceTitle = this.data.invoiceTitle;
          this.totalOrderAmount = this.orderList.reduce((item, index) => item + index.totalOrderAmount, 0)
          this.totalServiceAmount = this.orderList.reduce((item, index) => item + index.totalServiceAmount, 0)
          this.totalElectricityAmount = this.orderList.reduce((item, index) => item + index.totalElectricityAmount,
            0)
        });
      },
      updateInvoiceStatus() {
        console.log('修改申请开票状态', this.invoiceRecordId);
        const param = {
          id: this.invoiceRecordId,
          status: "1"
        };
        updateInvoice(param).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.selectInvoiceRecord();
          uni.reLaunch({
            url: '/adminList/orderManagement/orderManagement'
          })
        });
      },
      // 修改状态按钮
      dialogVisible() {
        this.$refs.invoiceDialog.open()
      },
      dialogClose() { // 取消

      }
    }
  }
</script>
<style lang="scss">
  page {
    background-color: $uni-bg-color !important;
  }
</style>
<style lang="scss" scoped>
  .scroll-Y {
    height: 400rpx;
  }

  .uni-group {
    display: flex;
    align-items: center;
  }

  .goods_nav {

    display: flex;

    height: 7%;

    // margin-top: 100rpx;
    // margin-bottom: 100px;
    align-items: center;
    justify-content: space-between;

    .goods_btn {
      // height: 40px;
      width: 50%;
      text-align: center;
      line-height: 40px;
      background: #2979ff;
      border-radius: 45px;
      color: #fff;
    }

  }

  .startBtn {
    width: 50%;
    margin-right: 20rpx;
    text-align: center;
    line-height: 40px;
    border-radius: 45px;
    color: #fff;
    background-color: #2979ff;
  }
</style>